<template>
<div class="container">
  <headers title="教学视频" :refresh="isRefresh" path="/home"></headers>
  <nav class="bar bar-tab">
    <a class="tab-item" v-link="{path: '/home', replace: true}">
      <span class="icon icon2 home-icon"></span>
      <span class="tab-label">首页</span>
    </a>
    <a class="tab-item" v-link="{path: '/tuijianma', replace: true}">
      <span class="icon icon2 tuijianma-icon"></span>
      <span class="tab-label">推荐码</span>
    </a>
    <a class="tab-item" v-link="{path: '/ucenter', replace: true}">
      <span class="icon icon2 ucenter-icon"></span>
      <span class="tab-label">个人中心</span>
    </a>
  </nav>
  <div class="content">
    <div class="list-block no-margin">
      <ul>
        <li class="item-content">
          <div class="item-media"><i class="icon icon-item-notice"></i></div>
          <div class="item-inner">
            <div class="item-title color-black">温馨提示：请按步骤观看下列视频</div>
          </div>
        </li>
      </ul>
    </div>
    <div class="content-block mar-top-15">
      <div v-for="(index, video) in videoList">
        <div class="col-50">
          <a class="button button-big button-round" @click="doPlay(video.videoUrl)">
            <span class="color-black">{{video.step}}</span><br/>
            <span class="color-light">{{video.title}}</span>
          </a>
        </div>
        <div class="down" v-if="index < videoList.length - 1">
            <img src="../assets/images/public/down.png">
        </div>
      </div>
    </div>
  </div>
  <div class="video-overlay" :class="{ 'video-overlay-visible': isVisible}">
    <span class="btn btn-close" @click="doClose">×</span>
    <video-player :options="videoOptions" ref="videoPlayer"></video-player>
  </div>
</div>
</template>

<script>
import $ from 'zepto'
import Headers from '../components/Headers'
import {videoPlayer} from 'vue-video-player'

export default {
  ready () {
    $.init()
    this.getVideo()
  },
  data () {
    return {
      isRefresh: false,
      isVisible: false,
      videoList: [],
      videoOptions: {
        sources: [{
          type: 'video/mp4',
          src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
        }]
      }
    }
  },
  methods: {
    getVideo () {
      this.$http.jsonp('http://www.mayishengcai.com/VoteManager/rest/findTeachVideo').then((data) => {
        this.$set('videoList', data.data.rows)
      })
    },
    doPlay (video) {
      if (video) {
        this.$set('isVisible', true)
        this.videoOptions.sources[0].src = video
      }
      else {
        $.alert('暂无视频')
      }
    },
    doClose () {
      this.$set('isVisible', false)
    }
  },
  components: {
    Headers,
    videoPlayer
  }
}
</script>
<style scoped>
.list-block ul{background:none;}
.button{border:1px solid #fff}
.button.button-big{height:3.5rem;line-height:1rem;padding-top:0.8rem;background:#fff}
.down{width:100%;height:40px;margin-top:0.5rem;}
.down img{height:80%;margin-left:47%}
.button.button-round {
    border-radius: 2.0rem;
}
.video-overlay.video-overlay-visible{
  visibility: visible;
  opacity: 1;
}
.video-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  z-index: 10600;
  visibility: hidden;
  opacity: 0;
  -webkit-transition-duration: .4s;
  transition-duration: .4s;
}
.video-overlay .btn.btn-close{
  position: absolute;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  text-align: center;
  color: #fff;
  top: 10px;
  right: 10px;
  z-index: 9999;
}
</style>